<template>
	<!-- 登录页面 -->
	<view class="login-wrapper">
		<MyNavbar title="登录-全国巡剪(演示)" />
		
		<div style="margin-top: 200rpx;">
			<!-- 插画 -->
			<u-image width="100%" height="300rpx" src="https://static01.imgkr.com/temp/6f124998cd2e42e08686cf2aede91701.png"/>
			
			<div class="" style="margin: 50rpx; padding: 24rpx;border-radius: 24rpx;">
				<!-- 表单 -->
				<u-form 
					ref="form"
					:model="formData" :rules="rules"
				>
					<u-form-item prop="username">
						<u--input
							v-model="formData.username"
							border="none"
							placeholder="手机号"
							prefixIcon="account-fill"
						></u--input>
					</u-form-item>
					
					<u-form-item prop="password">
						<u--input
							v-model="formData.password"
							border="none" type="password"
							placeholder="密码"
							prefixIcon="lock-fill"
						></u--input>
					</u-form-item>
				</u-form>
				
				<div style="margin-top: 24rpx;">
					<u-button 
						type="primary" text="登 录" @click="onClickLogin()"
						:loading="submitLoading" loadingText="登录中..."
					>
					</u-button>
				</div>
				
				<div style="margin-top: 80rpx;color: #999999;">
					登录即代表您已阅读并同意。
				</div>
				
				<div style="margin-top: 120rpx;">
					<u-divider text="第三方登录"></u-divider>
					
					<div class="flex" style="justify-content: space-evenly;">
						<u-icon name="weixin-fill" size="60rpx"/>
						<u-icon name="qq-fill" size="60rpx"/>
						<u-icon name="weibo" size="60rpx"/>
					</div>
				</div>
			</div>
		</div>
		
		<PageFooter />
	</view>
</template>

<script>
	import { mapState, mapMutations, mapActions } from 'vuex';
	
	export default {
		data() {
			return {
				formData: {
					// 手机号做账号
					username: '13888888888',
					password: '123456',
				},
				// 表单校验
				rules: {
					username: [
						{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
						{ message: '请输入正确的手机号', pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, trigger: ['blur'] },
					],
					password: [
						{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }
					],
				},
				submitLoading: false,
			}
		},
		methods: {
			// 全局状态方法 用户模块
			...mapActions('user', {
				'login': 'login',
			}),
			/**
			 * 点击登录
			 */
			onClickLogin(){
				let formData = this.formData;
				this.$refs.form.validate().then(res => {
					//校验通过
					// 1. loading效果
					this.submitLoading = true;
					
					// 请求login方法
					return this.login(formData);
				}).then(res=>{
					this.submitLoading = false;
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}).catch(e=>{
					this.submitLoading = false;
				});
			},
		}
	}
</script>

<style scoped>
	page{
		background-color: #FFFFFF;
	}
	
	.login-wrapper{
		background-color: #FFFFFF;
	}
</style>
